<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<body>
    <div class="box">
        <input type="text" v-model="num">
        <h1>{{info}}</h1>
        <!-- 显示与隐藏 -->
        <h3 v-if="num > 8">{{answer1}}</h3>
        <h3 v-else-if="num > 6">{{answer2}}</h3>
        <h3 v-else>{{answer3}}</h3>
    </div>
    <script>
        /* 
        需求：请你嫁给我吧？
        评分满分10  大于8 优秀  大于6 合格  低于6算了
        接过鲜花，羞涩的点点头
        接过鲜花。。。
        你是个好人，你很优秀，我配不上你

        要求 有一个input可以输入评分

        */
        let vm = new Vue({
            el:'.box',
            data:{
                info:'请你嫁给我吧？',
                answer1:'接过鲜花，羞涩的点点头',
                answer2:'接过鲜花。。。',
                answer3:'你是个好人，你很优秀，我配不上你',
                num:0
            }
            /* 
            初始值：
            str:''
            num:0
            beal:true / false
            arr:[]
            obj:{}
            err：null
            
            */
        })
    </script>
</body>
</html>